import { useTranslation } from 'react-i18next';
import { Select } from 'antd';
import { useState } from 'react';

const Index = () => {
  const { t, i18n } = useTranslation();
  const lang = localStorage.getItem('lang')||i18n.language||'zh'

  const handleChange = (value: string) => {
    i18n.changeLanguage(value)
    localStorage.setItem('lang',value)
  };

  return (
    <div className="
    bg-blue-200
    text-violet-600
    w-full
    h-[600px]
    border-2
    border-rose-500
    rounded-[12px]
    dark:bg-black dark:text-white
    pink:bg-pink-300 pink:text-rose-400
    blue:bg-sky-300 blue:text-cyan-300
    green:bg-emerald-300 green:text-emerald-400
    ">
      数据1
      <h1>{t('Welcome to React')}</h1>
      <Select
        defaultValue={lang}
        style={{ width: 120 }}
        onChange={handleChange}
        options={[
          { value: 'en', label: 'English' },
          { value: 'zh', label: '中文' },
        ]}
      />
    </div>
  )
}

export default Index
